<template>
	<scroll-view scroll-y="true" class="scroll">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="1000" class="swiper">
			<swiper-item class="item" v-for="(banner,index) in category.bannerUrlList" :key="index"><image :src="banner" class="img"></image></swiper-item>
	
		</swiper>
		<!-- 两行文字 -->
		<view class="title">{{category.name}}</view>
		<view class="title">{{category.fontName}}</view>
		<!-- 展示商品 -->
		<view class="good">
			<view class="item" v-for="item in itemList" :key="index">
				<image :src="item.listPicUrl" class="goodImg"></image>
				<text class="goodTitle">{{item.name}}</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	//辅助函数
	import {mapState} from 'vuex'
export default {
	props:['index'],
mounted(){
	//获取其他分类商品数据
	this.getCategoryData();
},
methods:{
	getCategoryData(){
		this.$store.dispatch("categoryList")
	}
},
computed:{
	...mapState({
		//原始写法
		list:(state)=>{
			return state.home.list
		}
		
		//简写   state 是大仓库   state.home.list 小仓库
		// list:state=>state.home.list
	}),
		//需要的元素计算出来--->对应某一个分类商品对象
			good(){
				return this.list[this.index]||{}
			},
			//轮播图|底下文字的数据
			category(){
				return this.good.category||{};
			},
			//分类底下商品图标与名字
			itemList(){
				return this.good.itemList||[]
			}
}
};
</script>

<style lang="stylus" scoped>
.scroll
	width 100%
	height calc(100vh - 160rpx)
	.swiper
		width 100%
		height 300rpx
		.item
			width 100%
			height 100%
			.img
				width 100%
				height 100%
	.title
		text-align center
	.good
		width 100%
		display flex
		flex-wrap wrap
		.item
			width 50%
			padding 20rpx
			box-sizing border-box
			.goodImg
				width 100%
				height 300rpx
				border-radius 50rpx
			.goodTitle
				display block
				width 100%
</style>
